
<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <div class="f f-a-c">
                <el-input size="small" placeholder="名称、账号、手机号" v-model="keyword" clearable style="width: 220px;" @keyup.enter.native="handleSearch">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div class="f-1"></div>
                <el-button style="margin-left: 20px" type="primary" size="small" icon="el-icon-plus" @click="addCustomer">新增</el-button>
            </div>

            <!-- 列表 -->
            <el-table class="th-bg" :data="dataList" :row-key="(row)=>{return row.id}"  v-loading="$store.state.tableLoad"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="运营商名称" prop="operName"></el-table-column>
                <el-table-column label="联系人" prop="contactName"></el-table-column>
                <el-table-column label="联系电话" prop="contactPhone"></el-table-column>
                <el-table-column label="登录账号" prop="userCode"></el-table-column>
                <el-table-column label="创建日期" prop="addTime"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="addCustomer(row)">编辑</el-button>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="!row.staffId" @click.native="readyAddAccount(row)">新增账号</el-dropdown-item>
                                <el-dropdown-item v-show="row.loginState===0" @click.native="changeLoginStatus(row)">启用登录</el-dropdown-item>
                                <el-dropdown-item v-show="row.loginState===1" @click.native="changeLoginStatus(row)">禁用登录</el-dropdown-item>
                                <el-dropdown-item @click.native="resetPassword(row)">重置密码</el-dropdown-item>
                                <el-dropdown-item @click.native="delOperator(row)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <!--新增运营商账号-->
            <el-dialog
                :append-to-body="true"
                title="新增运营商账号"
                :visible.sync="addDialog"
                width="440px"
                center
            >
                <el-form class="f f-d-c" :model="addForm" ref="form" size="small" label-width="100px" >
                    <el-form-item label="账号" prop="userCode">
                        <el-input class="form-item" type="text" v-model="addForm.userCode" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userPwd">
                        <el-input class="form-item" type="text" v-model="addForm.userPwd" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="addDialog=false">取 消</el-button>
                    <span style="display: inline-block;width: 20px;"></span>
                    <el-button type="primary" @click="addAccount">确 定</el-button>
                </div>
            </el-dialog>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="page"
                :limit.sync="pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
    import {Message} from "element-ui";
    import {getOperators} from "@/api/device";

    export default {
        name: "index",
        data(){
            return{
                page: 1,  //页码
                total: 0,  //总量
                pageSize: 10, //页长
                dataList: [],
                keyword: '',
                addDialog: false,
                addForm: {
                    id: null,
                    userCode: null,
                    userPwd: null,
                },
                rules: {
                    userCode: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {
          this.getList();
        },
        methods:{
            addAccount() {
                this.$refs.form.validate().then(() => {
                    this.$http({
                        url: '/api/operator/account/submit',
                        data: this.addForm
                    }).then(res=>{
                        Message.success('添加成功')
                        this.addDialog = false
                        this.getList()
                    });
                })
            },
            readyAddAccount(row) {
                this.addForm.id = row.id
                this.addDialog = true
            },
            addCustomer(row) {
                let query;
                if(row) {
                    query = {
                        id: row.id,
                        operName: row.operName,
                        contactName: row.contactName,
                        contactPhone: row.contactPhone,
                        operType: row.operType,
                        thirdParam: row.third_param
                    }
                }
                this.$router.push({ path: '/customer/addCustomer', query })
            },
            //搜索
            handleSearch(){
                this.page = 1;
                this.getList();
            },
            //获取数据
            getList(){
                getOperators({
                    operName: this.keyword,
                    page: this.page,
                    limit: this.pageSize,
                }).then(res=>{
                    this.dataList = res.data;
                    this.total = res.count;
                });
            },
            changeLoginStatus(row) {
                this.$http({
                    url:'/api/operator/account/enable',
                    data:{
                        staffId: row.staffId,
                        loginState: row.loginState === 1 ? 0:1
                    }
                }).then(res=>{
                    let text =  row.loginState === 1 ? '账号已禁用':'账号已开启'
                    Message.success(text)
                    this.getList()
                });
            },
            resetPassword(row) {
                this.$http({
                    url:'/api/operator/account/reset',
                    data:{
                        staffId: row.staffId
                    }
                }).then(res=>{
                    Message.success('重置成功！')
                    this.getList()
                });
            },
            delOperator(row) {
                this.$alert(`您确定要删除 ${row.operName} 的运营商吗？`, '提示').then(() => {
                    this.$http({
                        url:'/api/operator/delete',
                        data:{
                            id: row.id
                        }
                    }).then(res=>{
                        Message.success('删除成功！')
                        this.getList()
                    });
                })

            }
        }
    }
</script>

<style scoped lang="scss">
    .th-bg{
        margin-top: 40px;
    }
    .form-item{
        width: 220px;
    }
</style>
